<template>
	<view class="fontsize">
		<view :class="['todo',fontsizenub==1?'active':'']" @click="changesize(1)">较小</view>
		<view :class="['todo',fontsizenub==2?'active':'']" @click="changesize(2)">小</view>
		<view :class="['todo',fontsizenub==3?'active':'']" @click="changesize(3)">默认</view>
		<view :class="['todo',fontsizenub==4?'active':'']" @click="changesize(4)">大</view>
		<view :class="['todo',fontsizenub==5?'active':'']" @click="changesize(5)">较大</view>
		<view :class="['todo',fontsizenub==6?'active':'']" @click="changesize(6)">最大</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			//console.log(this.fontsizenub)
		},
		methods:{
			changesize(val){
				var that =this;
				that.fontsizenub = val;
				uni.setStorage({
					key: 'fontsizenub',data: val,
					success: function () {
						that.$store.commit('changesize',val);
					}
				});
			}
	    },
		computed:{
			...mapState(['fontsizenub'])
		}
	}
</script>

<style lang="scss">
	@import "../../common/publish";
	@include fontsizefn(".abd",40upx);
	page{
		background-color: $bgcolor;
	}
	.fontsize{
		margin-top:30upx;
	}
		
	.todo{
		width:750upx;
		height:100upx;
		border-bottom:1px solid #ccc;
		background-color:#fff;
		padding-left:30upx;
		line-height:100upx;
		font-size:34upx;
	}
	.fontsize .active{
		background-color:#e9e9e9;
	}
</style>
